<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0 ,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

  <title>服务订单结算</title>

  <link href="./AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css" />

  <link href="./basic/css/demo.css" rel="stylesheet" type="text/css" />
  <link href="./css/cartstyle.css" rel="stylesheet" type="text/css" />

  <link href="./css/jsstyle.css" rel="stylesheet" type="text/css" />

  <script type="text/javascript" src="./js/address.js"></script>

  <!--导入-->
  <script src="js/plugins/vue/dist/vue.js"></script>
  <script src="js/plugins/axios/dist/axios.js"></script>
  <script src="js/common.js"></script>

</head>

<body>
<div id="payData"></div>
<!--顶部导航条 -->
<div class="am-container header">
  <!--<ul class="message-l">
      <div class="topMessage">
          <div class="menu-hd">
              <a href="login.html" target="_blank" class="h">亲，请登录</a>
              <a href="register.html" target="_blank" style="color: deeppink">免费注册</a>
          </div>
      </div>
  </ul>-->
  <ul class="message-r">
    <div class="topMessage home">
      <div class="menu-hd"><a href="#" target="_top" class="h">商城首页</a></div>
    </div>
    <div class="topMessage my-shangcheng">
      <div class="menu-hd MyShangcheng"><a href="#" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a></div>
    </div>
    <div class="topMessage mini-cart">
      <div class="menu-hd"><a id="mc-menu-hd" href="#" target="_top"><i class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum" class="h">0</strong></a></div>
    </div>
    <div class="topMessage favorite">
      <div class="menu-hd"><a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a></div>
    </div>
  </ul>
</div>

<!--悬浮搜索框-->

<div class="nav white">
  <!--	<div class="logo"><img src="./images/logo.png" /></div>-->
  <div class="logoBig">
    <!--		<li><img src="./images/logobig.png" /></li>-->
  </div>

  <div class="search-bar pr">
    <a name="index_none_header_sysc" href="#"></a>
    <form>
      <input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
      <input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
    </form>
  </div>
</div>

<div class="clear"></div>
<div class="concent">

  <div class="paycont" id="paycont">
    <!--服务 -->
    <div class="logistics">
      <h3>选择配送方式</h3>
      <ul class="op_express_delivery_hot">
        <li data-value="yuantong" class="OP_LOG_BTN  "><i class="c-gap-right" style="background-position:0px -468px"></i>送货上门<span></span></li>
        <li data-value="shentong" class="OP_LOG_BTN  "><i class="c-gap-right" style="background-position:0px -1008px"></i>到店自取<span></span></li>
      </ul>
    </div>
    <div class="clear"></div>
    <!--地址 -->
    <div class="address">
      <h3>确认地址 </h3>
      <div class="control">
        <div class="tc-btn createAddr theme-login am-btn am-btn-danger">使用新地址</div>
      </div>
      <div class="clear"></div>
      <ul>
        <div class="per-border"></div>
        <li  @click="addressSelect" class="user-addresslist defaultAddr" addressId="1">

          <div class="address-left">
            <div class="user DefaultAddr">

										<span class="buy-address-detail">
                   <span class="buy-user">大大帅</span>
										<span class="buy-phone">18888888888</span>
										</span>
            </div>
            <div class="default-address DefaultAddr">
              <span class="buy-line-title buy-line-title-type">收货地址：</span>
              <span class="buy--address-detail">
								   <span class="province">四川</span>省
										<span class="city">成都</span>市
										<span class="dist">武侯</span>区
										<span class="street">天府新区1号楼女厕所</span>
										</span>

              </span>
            </div>
            <ins class="deftip">默认地址</ins>
          </div>
          <div class="address-right">
            <a href="./person/address.html">
              <span class="am-icon-angle-right am-icon-lg"></span></a>
          </div>
          <div class="clear"></div>

          <div class="new-addr-btn">
            <a href="#" class="hidden">设为默认</a>
            <span class="new-addr-bar hidden">|</span>
            <a href="#">编辑</a>
            <span class="new-addr-bar">|</span>
            <a href="javascript:void(0);" onclick="delClick(this);">删除</a>
          </div>
        </li>
        <div class="per-border"></div>
        <li @click="addressSelect" class="user-addresslist" addressId="2">
          <div class="address-left">
            <div class="user DefaultAddr">

										<span class="buy-address-detail">
                   <span class="buy-user">大大帅 </span>
										<span class="buy-phone">18877777777</span>
										</span>
            </div>
            <div class="default-address DefaultAddr">
              <span class="buy-line-title buy-line-title-type">收货地址：</span>
              <span class="buy--address-detail">
								   <span class="province">四川</span>省
										<span class="city">成都</span>市
										<span class="dist">武侯</span>区
										<span class="street">天府新区5号楼女厕所</span>
										</span>

              </span>
            </div>
            <ins class="deftip hidden">默认地址</ins>
          </div>
          <div class="address-right">
            <span class="am-icon-angle-right am-icon-lg"></span>
          </div>
          <div class="clear"></div>

          <div class="new-addr-btn">
            <a href="#">设为默认</a>
            <span class="new-addr-bar">|</span>
            <a href="#">编辑</a>
            <span class="new-addr-bar">|</span>
            <a href="javascript:void(0);"  onclick="delClick(this);">删除</a>
          </div>

        </li>

      </ul>

      <div class="clear"></div>
    </div>

    <!--支付方式-->
    <div class="logistics">
      <h3>选择支付方式</h3>
      <ul class="pay-list">
        <li class="pay card"><img src="./images/wangyin.jpg" />银联<span></span></li>
        <li class="pay qq"><img src="./images/weizhifu.jpg" />微信<span></span></li>
        <li class="pay taobao"><img src="./images/zhifubao.jpg" />支付宝<span></span></li>
      </ul>
    </div>
    <div class="clear"></div>

    <!--订单 -->
    <div class="concent">
      <div id="payTable">
        <h3>确认订单信息</h3>
        <div class="cart-table-th">
          <div class="wp">
            <div class="th th-item">
              <div class="td-inner">服务信息</div>
            </div>
            <div class="th th-price">
              <div class="td-inner">单价</div>
            </div>
            <div class="th th-sum">
              <div class="td-inner">金额</div>
            </div>
            <div class="th th-oplist">
              <div class="td-inner">配送方式</div>
            </div>
          </div>
        </div>
        <div class="clear"></div>

        <div class="item-list">
          <div class="bundle  bundle-last">
            <div class="bundle-main">
              <ul class="item-content clearfix">
                <div class="pay-phone">
                  <li class="td td-item">
                    <div class="item-pic">
                      <a href="#" class="J_MakePoint">
                        <img :src="fastDfsUrl+product.resources.split(',')[Math.floor(Math.random()*product.resources.split(',').length)]"/>
                    </div>
                    <div class="item-info">
                      <div class="item-basic-info">
                        <a href="#" class="item-title J_MakePoint" data-point="tbcart.8.11">{{product.name}}</a>
                      </div>
                    </div>
                  </li>
                  <li class="td td-info">
                    <div class="item-props">
                      <!--<span class="sku-line">颜色：12#川南玛瑙</span>
                      <span class="sku-line">包装：裸装</span>-->
                    </div>
                  </li>
                  <li class="td td-price">
                    <div class="item-price price-promo-promo">
                      <div class="price-content">
                        <em class="J_Price price-now">{{product.saleprice}}</em>
                      </div>
                    </div>
                  </li>
                </div>
                <!--<li class="td td-amount">
                    <div class="amount-wrapper ">
                        <div class="item-amount ">
                            <span class="phone-title">购买数量</span>
                            <div class="sl">
                                <input class="min am-btn" name="" type="button" value="-" />
                                <input class="text_box" name="" type="text" value="1" style="width:30px;" />
                                <input class="add am-btn" name="" type="button" value="+" />
                            </div>
                        </div>
                    </div>
                </li>-->
                <li class="td td-sum">
                  <div class="td-inner">
                    <em tabindex="0" class="J_ItemSum number">{{product.saleprice}}</em>
                  </div>
                </li>
                <li class="td td-oplist">
                  <div class="td-inner">
                    <span class="phone-title">配送方式</span>
                    <div class="pay-logis">
                      快递<b class="sys_item_freprice">8</b>元
                    </div>
                  </div>
                </li>
              </ul>
              <div class="clear"></div>
            </div>
          </div>
          <div class="clear"></div>
        </div>
      </div>
      <div class="clear"></div>
      <div class="pay-total">
        <!--留言-->
        <div class="order-extra">
          <div class="order-user-info">
            <div id="holyshit257" class="memo">
              <label>买家留言：</label>
              <input type="text" title="选填,对本次交易的说明（建议填写已经和卖家达成一致的说明）" placeholder="选填,建议填写和卖家达成一致的说明" class="memo-input J_MakePoint c2c-text-default memo-close">
              <div class="msg hidden J-msg">
                <p class="error">最多输入500个字符</p>
              </div>
            </div>
          </div>

        </div>
        <!--优惠券 -->
        <div class="buy-agio">
          <li class="td td-coupon">

            <span class="coupon-title">优惠券</span>
            <select data-am-selected>
              <option value="a">
                <div class="c-price">
                  <strong>￥8</strong>
                </div>
                <div class="c-limit">
                  【消费满10元可用】
                </div>
              </option>
              <option value="b" selected>
                <div class="c-price">
                  <strong>￥3</strong>
                </div>
                <div class="c-limit">
                  【无门槛】
                </div>
              </option>
            </select>
          </li>

          <li class="td td-bonus">

            <span class="bonus-title">红包</span>
            <select data-am-selected>
              <option value="a">
                <div class="item-info">
                  ¥50.00<span>元</span>
                </div>
                <div class="item-remainderprice">
                  <span>还剩</span>10.40<span>元</span>
                </div>
              </option>
              <option value="b" selected>
                <div class="item-info">
                  ¥50.00<span>元</span>
                </div>
                <div class="item-remainderprice">
                  <span>还剩</span>50.00<span>元</span>
                </div>
              </option>
            </select>

          </li>

        </div>
        <div class="clear"></div>
      </div>
      <!--含运费小计 -->
      <div class="buy-point-discharge ">
        <p class="price g_price ">
          合计（含运费） <span>¥</span><em class="pay-sum">{{product.saleprice+8}}</em>
        </p>
      </div>

      <!--信息 -->
      <div class="order-go clearfix">
        <div class="pay-confirm clearfix">
          <div class="box">
            <div tabindex="0" id="holyshit267" class="realPay"><em class="t">实付款：</em>
              <span class="price g_price ">
                                    <span>¥</span> <em class="style-large-bold-red " id="J_ActualFee">{{product.saleprice+8}}</em>
											</span>
            </div>
          </div>

          <div id="holyshit269" class="submitOrder">
            <div class="go-btn-wrap">
              <a id="J_Go" href="javascript:;" @click="orderSubmit" class="btn-go" tabindex="0" title="点击此按钮，提交订单">提交订单</a>
            </div>
          </div>
          <div class="clear"></div>
        </div>
      </div>
    </div>
    <div class="clear"></div>
  </div>
</div>
<div class="footer">
  <div class="footer-hd">
    <p>
      <a href="#">恒望科技</a>
      <b>|</b>
      <a href="#">商城首页</a>
      <b>|</b>
      <a href="#">支付宝</a>
      <b>|</b>
      <a href="#">物流</a>
    </p>
  </div>
  <div class="footer-bd">
    <p>
      <a href="#">关于恒望</a>
      <a href="#">合作伙伴</a>
      <a href="#">联系我们</a>
      <a href="#">网站地图</a>
      <em>© 2015-2025 Hengwang.com 版权所有. 更多模板 <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></em>
    </p>
  </div>
</div>
</div>
<div class="theme-popover-mask"></div>
<div class="theme-popover">

  <!--标题 -->
  <div class="am-cf am-padding">
    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">新增地址</strong> / <small>Add address</small></div>
  </div>
  <hr/>

  <div class="am-u-md-12">
    <form class="am-form am-form-horizontal">

      <div class="am-form-group">
        <label for="user-name" class="am-form-label">收货人</label>
        <div class="am-form-content">
          <input type="text" id="user-name" placeholder="收货人">
        </div>
      </div>

      <div class="am-form-group">
        <label for="user-phone" class="am-form-label">手机号码</label>
        <div class="am-form-content">
          <input id="user-phone" placeholder="手机号必填" type="email">
        </div>
      </div>

      <div class="am-form-group">
        <label for="user-phone" class="am-form-label">所在地</label>
        <div class="am-form-content address">
          <select data-am-selected>
            <option value="a">浙江省</option>
            <option value="b">湖北省</option>
          </select>
          <select data-am-selected>
            <option value="a">温州市</option>
            <option value="b">武汉市</option>
          </select>
          <select data-am-selected>
            <option value="a">瑞安区</option>
            <option value="b">洪山区</option>
          </select>
        </div>
      </div>

      <div class="am-form-group">
        <label for="user-intro" class="am-form-label">详细地址</label>
        <div class="am-form-content">
          <textarea class="" rows="3" id="user-intro" placeholder="输入详细地址"></textarea>
          <small>100字以内写出你的详细地址...</small>
        </div>
      </div>

      <div class="am-form-group theme-poptit">
        <div class="am-u-sm-9 am-u-sm-push-3">
          <div class="am-btn am-btn-danger">保存</div>
          <div class="am-btn am-btn-danger close">取消</div>
        </div>
      </div>
    </form>
  </div>

</div>

<div class="clear"></div>
<script type="text/javascript">
  $(function () {
    new Vue({
      el: "#paycont",
      data() {
        return {
          fastDfsUrl:"http://123.207.27.208/",
          order:{
            service_method:'0',//送宠方式 0送宠上门 1到店自取
            address_id: '1',//用户地址ID  只能写t_user_address中的地址
            pay_method:'2',//支付方式： 0银联 1微信 2支付宝
            product_id:null//服务id
          },
          product:{

          }
        }
      },
      methods: {
        addressSelect(){
          this.order.address_id = $(event.target).attr("addressId");
          alert( this.order.address_id)
        },
        orderSubmit() {
          // this.$http.put("/orderProduct" + this.product)
          //         .then(result => {
          //           if (result.data.success()) {
                      window.open("/personCenter.html")
                  //   } else {
                  //     alert("订单创建失败，" + result.data.msg);
                  //   }
                  // })
        }

      },
      mounted(){
        //获取服务的ID
        let productId =  parseUrlParams2Obj(location.href).productId;
        if(productId){
          this.order.product_id = productId;
          this.$http.get("/product/"+productId).then(result=>{
            this.product = result.data;
          })
        }
      }
    })
  })
</script>
</body>

</html>